<template>
  <div>
    <zh-form
        :span="6"
        ref="rolePageFrom"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        :model="formData"
        :rules="rules">

      <div style="padding: 15px 20px">
        <zh-row>
          <zh-input
              prop="b0122"
              :disabled="disabled"
              type="select"
              :options="dictData.xzqh"
              :defaultFields="{ label: 'dictValue', value: 'dictKey' }"
              label="县市区"
              v-model="formData.b0122"
          ></zh-input>
          <zh-input
              prop="b0102"
              :disabled="disabled"
              type="text"
              label="点位名称"
              v-model="formData.b0102"
          ></zh-input>
<!--          <zh-input-->
<!--              prop="b0109"-->
<!--              :disabled="disabled"-->
<!--              type="text"-->
<!--              label="地址"-->
<!--              v-model="formData.b0109"-->
<!--          ></zh-input>-->
          <zh-input
              prop="b0111"
              :disabled="disabled"
              type="number"
              label="经度"
              v-model="formData.b0111"
          ></zh-input>
          <zh-input
              prop="b0112"
              :disabled="disabled"
              type="number"
              label="纬度"
              v-model="formData.b0112"
          ></zh-input>
          <zh-input
              prop="b1202"
              :disabled="disabled"
              type="text"
              label="功能区"
              v-model="formData.b1202"
          ></zh-input>
          <zh-input
              prop="b1203"
              :disabled="disabled"
              type="number"
              label="功能区编码"
              v-model="formData.b1203"
          ></zh-input>
          <zh-input
              prop="b1204"
              :disabled="disabled"
              type="text"
              label="社区"
              v-model="formData.b1204"
          ></zh-input>
          <zh-input
              prop="b1205"
              :disabled="disabled"
              label="详细地址"
              v-model="formData.b1205"
          ></zh-input>
          <zh-input
              prop="b1206"
              :disabled="disabled"
              type="text"
              label="是否在建成区内"
              v-model="formData.b1206"
          ></zh-input>
          <zh-input
              prop="b1207"
              :disabled="disabled"
              type="text"
              label="保护批次号"
              v-model="formData.b1207"
          ></zh-input>
          <zh-input
              prop="b1208"
              :disabled="disabled"
              type="text"
              label="挂牌号"
              v-model="formData.b1208"
          ></zh-input>
          <zh-input
              prop="b1209"
              :disabled="disabled"
              type="text"
              label="牌号"
              v-model="formData.b1209"
          ></zh-input>
          <zh-input
              prop="b1210"
              :disabled="disabled"
              type="text"
              label="建档时间"
              v-model="formData.b1210"
          ></zh-input>
          <zh-input
              prop="b1211"
              :disabled="disabled"
              type="text"
              label="生长态势"
              v-model="formData.b1211"
          ></zh-input>
          <zh-input
              prop="b1212"
              :disabled="disabled"
              type="text"
              label="种名"
              v-model="formData.b1212"
          ></zh-input>
          <zh-input
              prop="b1213"
              :disabled="disabled"
              type="text"
              label="科名"
              v-model="formData.b1213"
          ></zh-input>
          <zh-input
              prop="b1214"
              :disabled="disabled"
              type="text"
              label="属名"
              v-model="formData.b1214"
          ></zh-input>
          <zh-input
              prop="b1215"
              :disabled="disabled"
              type="number"
              label="树龄（年）"
              v-model="formData.b1215"
          ></zh-input>
          <zh-input
              prop="b1216"
              :disabled="disabled"
              type="text"
              label="树龄类型"
              v-model="formData.b1216"
          ></zh-input>
          <zh-input
              prop="b1217"
              :disabled="disabled"
              type="text"
              label="保护级别"
              v-model="formData.b1217"
          ></zh-input>
          <zh-input
              prop="b1218"
              :disabled="disabled"
              type="number"
              label="树高(m)"
              v-model="formData.b1218"
          ></zh-input>
          <zh-input
              prop="b1219"
              :disabled="disabled"
              type="number"
              label="胸径(cm)"
              v-model="formData.b1219"
          ></zh-input>
          <zh-input
              prop="b1220"
              :disabled="disabled"
              type="number"
              label="胸围(cm)"
              v-model="formData.b1220"
          ></zh-input>
          <zh-input
              prop="b1221"
              :disabled="disabled"
              type="number"
              label="平均冠幅(m)"
              v-model="formData.b1221"
          ></zh-input>
          <zh-input
              prop="b1222"
              :disabled="disabled"
              type="number"
              label="东西冠幅(m)"
              v-model="formData.b1222"
          ></zh-input>
          <zh-input
              prop="b1223"
              :disabled="disabled"
              type="number"
              label="南北冠幅(m)"
              v-model="formData.b1223"
          ></zh-input>
          <zh-input
              prop="b1224"
              :disabled="disabled"
              type="text"
              label="生长环境"
              v-model="formData.b1224"
          ></zh-input>
          <zh-input
              prop="b1225"
              :disabled="disabled"
              type="text"
              label="树木描述"
              v-model="formData.b1225"
          ></zh-input>
          <zh-input
              prop="b1226"
              :disabled="disabled"
              type="text"
              label="保护性措施"
              v-model="formData.b1226"
          ></zh-input>
          <zh-input
              prop="b1227"
              :disabled="disabled"
              type="text"
              label="保护建议"
              v-model="formData.b1227"
          ></zh-input>
          <zh-input
              prop="b1228"
              :disabled="disabled"
              type="text"
              label="管理级别"
              v-model="formData.b1228"
          ></zh-input>
          <zh-input
              prop="b1229"
              :disabled="disabled"
              type="text"
              label="权属性质"
              v-model="formData.b1229"
          ></zh-input>
          <zh-input
              prop="b1230"
              :disabled="disabled"
              type="text"
              label="管理机构"
              v-model="formData.b1230"
          ></zh-input>
          <zh-input
              prop="b1231"
              :disabled="disabled"
              type="text"
              label="管养类型"
              v-model="formData.b1231"
          ></zh-input>
          <zh-input
              prop="b1232"
              :disabled="disabled"
              type="text"
              label="管养资金来源"
              v-model="formData.b1232"
          ></zh-input>
          <zh-input
              prop="b1233"
              :disabled="disabled"
              type="text"
              label="死亡时间"
              v-model="formData.b1233"
          ></zh-input>
          <zh-input
              prop="b1234"
              :disabled="disabled"
              type="text"
              label="死亡原因"
              v-model="formData.b1234"
          ></zh-input>
          <zh-input
              prop="b1235"
              :disabled="disabled"
              type="text"
              label="处理情况"
              v-model="formData.b1235"
          ></zh-input>
          <zh-input
              type="text"
              prop="b1235"
              :disabled="disabled"
              label="备注"
              v-model="formData.b1236"
          ></zh-input>
        </zh-row>
      </div>
    </zh-form>
      <div class="operate">
        <div style="width: 10%;">多媒体</div>
        <div style="width: 90%;display: block">
          <div style="text-align: right;width: 100%">
            <ep-button
                icon="add.svg"
                size="small"
                type="primary"
                @click="addMediaInfo()"
                :disabled="disabled"
            >添加
            </ep-button>
          </div>
          <div>
            <ul class="media-wrap">
              <li v-for="(item, index) in b14VOList" :key="index" v-if="render">
                <div class="item special">
                  <div class="desc">序号</div>
                  <p>{{ item.b1406 }}</p>
                </div>
                <div class="item">
                  <div class="desc">名称</div>
                  <p>{{ item.b1402 }}</p>
                </div>
                <div class="item">
                  <div class="desc">类型</div>
                  <p>{{ item.b1403Name }}</p>
                </div>
                <div class="item" v-if="item.b1403==5">
                  <div class="desc">链接</div>
                  <p>{{ item.b1407 }}</p>
                </div>
                <div class="item">
                  <div class="desc">缩略图</div>
                  <template v-if="item.b1403Name === '图片'">
                    <img
                        v-if="item.b1404"
                        :src="fileShowUrl + item.b1404"
                        @click="checkImg(item.b1404)"
                        alt=""
                    />
                  </template>
                  <template v-else>
                    <img
                        v-if="item.b1407"
                        :src="item.b1407"
                        @click="checkImgForUrl(item.b1407)"
                        alt=""
                    />
                  </template>
                </div>

                <div class="item">
                  <div class="desc"></div>
                  <div class="btn-wrap">
                    <ep-button
                        size="small"
                        icon="edit.svg"
                        @click="editMediaInfo(item, index,b13VOIndex)"
                        :disabled="disabled"
                    >编辑
                    </ep-button>
                    <ep-button
                        size="small"
                        type="danger"
                        icon="del.svg"
                        @click="deleteMediaInfo(index,b13VOIndex)"
                        :disabled="disabled"
                    >删除
                    </ep-button>
                    <ep-button size="small"
                               @click="dowloadFile(item)"
                               style="margin-left: 15px"
                    >
                      下载
                    </ep-button>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    <a-modal
        :title="modalTitle"
        centered
        style="top: 20px"
        width="50%"
        destroyOnClose
        v-model="visible"
        cancelText="关闭"
        okText="保存"
        @ok="handleForm"
    >
      <GsGmMediaInfoItem ref="gsGmMediaInfoItem"/>
    </a-modal>
  </div>
</template>

<script>
import {fileDownloadUrl, fileShowUrl, getBatchDict} from "@/services/system/api";
import {
  saveMingShuGuMu,
  getMingShuGuMuDetails,
} from "@/services/system/whdngxlApi";
import modal from "ant-design-vue/lib/modal";
import GsGmMediaInfoItem from "@/pages/system/form/GsGmMediaInfoItem";

export default {
  name: "GuShuGuMuAddForm",
  components: {
    GsGmMediaInfoItem
  },
  props: {
    listQuery: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      dictData: {
        xzqh:[],
      },
      disabled: false,
      formData: {
        b0122:'',
        b0102:'',
        b0109:'',
        b0111:'',
        b0112:'',
        b1201: '',
        b0101: '',
        b1202: '',
        b1203: '',
        b1204: '',
        b1205: '',
        b1206: '',
        b1207: '',
        b1208: '',
        b1209: '',
        b1210: '',
        b1211: '',
        b1212: '',
        b1213: '',
        b1214: '',
        b1215: '',
        b1216: '',
        b1217: '',
        b1218: '',
        b1219: '',
        b1220: '',
        b1221: '',
        b1222: '',
        b1223: '',
        b1224: '',
        b1225: '',
        b1226: '',
        b1227: '',
        b1228: '',
        b1229: '',
        b1230: '',
        b1231: '',
        b1232: '',
        b1233: '',
        b1234: '',
        b1235: '',
        b1236: '',
      },
      // labelCol: {sm: {span: 2}, md: {span: 2}, xs: {span: 24}, lg: {span: 2}, xl: {span: 2}, xxl: {span: 2}},
      // wrapperCol: {sm: {span: 22}, md: {span: 22}, xs: {span: 24}, lg: {span: 22}, xl: {span: 22}, xxl: {span: 22}},
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      rules: {},
      b14VOList: [],
      b0202Name: "",
      b14VOListForEdit:[],
      b14VOListForDel:[],
      b1406Num: 0,
      b13VOIndex: -1,
      modalTitle: '',
      visible: false,
      fileShowUrl: fileShowUrl, //预览接口地址
      render: true,
      h04Index: -1,
    };
  },
  created() {
    const params = {}
    params.dictFields = 'xzqh'
    this.$http.post(getBatchDict, params).then(res => {
      this.dictData = res.result
    })
  },
  methods: {
    initData(row, operate) {
      this.disabled = operate === 'view'
      if (row.b1201) {
        const params = {};
        params.b1201 = row.b1201
        setTimeout(() => {
          this.$http
              .post(getMingShuGuMuDetails, params)
              .then((res) => {
                if (res.result) {
                  this.formData = res.result
                  this.b14VOList=res.result.b14VOList
                }
              })
              .catch((error) => {
              })
              .finally(() => {
              });
        }, 50);
      }
    },
    saveData() {
      this.$loading.show('正在处理数据,请等待...')
      const params = Object.assign(this.formData)
      params.b14VOList=this.b14VOList
      params.b14VOListForDel=this.b14VOListForDel
      params.b14VOListForEdit=this.b14VOListForEdit
      setTimeout(() => {
        this.$http.post(saveMingShuGuMu, params).then((res) => {
          this.$message.info('保存成功')
          this.$emit("handleCancel")
          if (this.listQuery) {
            this.listQuery()
          }
          this.$loading.hide()
        }).catch((error) => {
          console.log(JSON.stringify(error))
          this.$loading.hide()
        }).finally(() => {
        })
      }, 50)
    },
    checkImg(showId) {
      let url = this.fileShowUrl + showId;
      window.open(url, "_blank");
    },
    checkImgForUrl(url) {
      window.open(url, "_blank");
    },
    getListSize(list) {
      this.b1406Num = 0;
      list.forEach((item) => {
        if (item.b1406 > this.b1406Num) {
          this.b1406Num = item.b1406;
        }
      });
      if (this.b1406Num < list.length) {
        this.b1406Num = list.length - 1;
      }
      this.b1406Num++;
    },
    //新增
    addMediaInfo(index) {
      this.b13VOIndex = index
      this.modalTitle = "新增";
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.gsGmMediaInfoItem.editFlag = false
        this.getListSize(this.b14VOList);
        this.$refs.gsGmMediaInfoItem.b1406Num = this.b1406Num;
        this.$refs.gsGmMediaInfoItem.init(null);
      });
    },
    //编辑
    editMediaInfo(row, index, b13VOIndex) {
      this.b13VOIndex = b13VOIndex
      this.modalTitle = "编辑";
      this.editIndex = index;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.gsGmMediaInfoItem.editFlag = false
        if (row.b0201) {
          row.flag = "edit";
        }
        this.$refs.gsGmMediaInfoItem.init(row);
      });
    },
    deleteMediaInfo(index, b13VOIndex) {
      this.b13VOIndex = b13VOIndex
      modal.confirm({
        title: "确认删除吗？",
        onOk: () => {
          if (this.b14VOList[index].b1401) {
            const item = JSON.parse(JSON.stringify(this.b14VOList[index]));
            item.flag = "delete";
            this.b14VOListForDel.push(item);
          }
          this.b14VOList.splice(index, 1);
        },
        onCancel: () => {
        },
      });
    },
    //确定
    handleForm() {
      var gsGmMediaInfoItem = this.$refs.gsGmMediaInfoItem.mediaInfoItem;
      debugger
      if (this.modalTitle === "新增") {
        gsGmMediaInfoItem.flag = "save";
        this.b14VOList.push(gsGmMediaInfoItem);
      } else {
        if(gsGmMediaInfoItem.flag === 'edit'){
          this.b14VOListForEdit.push(gsGmMediaInfoItem)
        }
        this.b14VOList.splice(this.editIndex, 1, gsGmMediaInfoItem);
      }
      this.$nextTick(() => {
        this.visible = false;
      });
    },
    dowloadFile(row) {
      let downloadUrl = fileDownloadUrl
      if (row.b1405.length > 0) {
        downloadUrl += row.b1405
      }
      let a = document.createElement('a');
      a.href = downloadUrl;
      a.click();
    },
  },
}

</script>

<style lang="less" scoped>
.operate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 10px;


  > div {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }


}

.media-wrap {
  margin-top: 15px;

  li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;

    .item {
      flex: 0 0 auto;
      width: 18%;

      .desc {
        width: 100%;
        height: 21px;
        line-height: 21px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      p {
        width: 100%;
        height: 32px;
        line-height: 30px;
        padding: 0 10px;
        border: 1px solid #3e9fc8;
        border-radius: 4px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .btn-wrap {
        text-align: center;
      }

      img {
        width: auto;
        height: 90px;
        max-width: 98%;
        vertical-align: middle;
        cursor: pointer;
      }

      &.special {
        width: 5%;
      }
    }
  }
}
</style>